<template>
  <div class="login-wrap">
    <div class="ms-login">
      <div class="ms-title">智慧长兴农业综合管理门户</div>
      <el-form
        :model="param"
        :rules="rules"
        ref="login"
        label-width="0px"
        class="ms-content"
      >
        <!-------------->
        <el-form-item prop="username">
          <el-input v-model="param.username" placeholder="账号">
            <el-button slot="prepend" icon="el-icon-user"></el-button>
          </el-input>
        </el-form-item>
        <!-------------->
        <el-form-item prop="password">
          <el-input
            type="password"
            placeholder="密码"
            v-model="param.password"
            @keyup.enter.native="submitForm()"
          >
            <el-button slot="prepend" icon="el-icon-lock"></el-button>
          </el-input>
        </el-form-item>
        <!------验证码-------->
        <el-form-item prop="captcha">
          <el-row :gutter="20">
            <el-col :span="10">
              <el-input v-model="param.captcha" placeholder="验证码"></el-input>
            </el-col>
            <el-col :span="14" class="login-captcha">
              <img
                class="login-captcha-img"
                :src="captchaPath"
                @click="getCaptcha()"
                alt
              />
            </el-col>
          </el-row>
        </el-form-item>
        <!--  -->
        <div class="login-btn">
          <el-button type="primary" @click="submitForm()">登录</el-button>
        </div>
        <p class="login-tips">Tips :欢迎您</p>
        <!-- <p @click="gogo(1)">董事长登录</p>
        <p @click="gogo(2)">销售人员登录</p>
        <p @click="gogo(3)">行政人员登录</p>
        <p @click="gogo(4)">财务人员登录</p> -->
      </el-form>
    </div>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode";
import { getUUID, http } from "../tools/login.js";
export default {
  data: function() {
    return {
      param: {
        username: "",
        password: "",
        uuid: "",
        captcha: ""
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      captchaPath: ""
    };
  },
  created() {
    this.getCaptcha();
  },
  methods: {
    gogo(t) {
      localStorage.setItem("protal-token", "ssssssssssss");
      switch (t) {
        case 1:
          this.$store.dispatch("getUserInf", {
            name: "苏长征",
            department: "董事会",
            duty: "董事长",
            num: "00001",
            head: "/portal/images/head.jpg"
          });
          this.$store.dispatch("getPermissionTest", [
            {
              path: "/xs",
              name: "销售管理"
            },
            {
              path: "/xs",
              name: "销售管理"
            },
            {
              path: "/xz",
              name: "行政管理"
            }
          ]);
          break;
        case 2:
          this.$store.dispatch("getUserInf", {
            name: "张销售",
            department: "销售部门",
            duty: "销售",
            num: "00002",
            head: "/portal/images/head2.jpg"
          });
          this.$store.dispatch("getPermissionTest", [
            {
              path: "/xs",
              name: "销售管理"
            }
          ]);
          break;
        case 3:
          this.$store.dispatch("getUserInf", {
            name: "李行政",
            department: "行政部门",
            duty: "行政管理",
            num: "00003",
            head: "/portal/images/head3.jpg"
          });
          this.$store.dispatch("getPermissionTest", [
            {
              path: "/xs",
              name: "销售管理"
            }
          ]);
          break;
        case 4:
          this.$store.dispatch("getUserInf", {
            name: "王财务",
            department: "财务部门",
            duty: "财务管理",
            num: "00004",
            head: "/portal/images/head4.jpg"
          });
          this.$store.dispatch("getPermissionTest", [
            {
              path: "/xz",
              name: "行政管理"
            }
          ]);
          break;
      }
      this.$router.push("/");
    },
    submitForm() {
      this.$refs["login"].validate(valid => {
        if (valid) {
          http({
            url: http.adornUrl("/common/sys/login"),
            method: "post",
            data: http.adornData({
              email: this.param.username,
              password: this.param.password,
              uuid: this.param.uuid,
              captcha: this.param.captcha
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              localStorage.setItem("protal-token", JSON.stringify(data.token));
              const decoded = jwt_decode(data.token);
              
              // console.log(decoded); // 用户信息
              // this.$store.dispatch("setUser", decoded);
              // this.$store.dispatch("setToken", false);
              this.$message({
                message: "登陆成功",
                type: "success"
              });
              this.$store.dispatch("getPermission"); //获取权限
              this.$store.dispatch("getChartsShow"); //获取图表权限
              this.$store.commit("setUserInfo",decoded); // 用户信息
              this.$router.push("/");
            } else {
              this.getCaptcha();
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    // 获取验证码
    getCaptcha() {
      this.param.uuid = getUUID();
      this.captchaPath = http.adornUrl(
        `/common/captcha.jpg?uuid=${this.param.uuid}`
      );
    }
  }
};
</script>

<style scoped>
/* .login-wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url(../assets/img/login-bg.jpg);
  background-size: 100%;
} */
.ms-title {
  width: 100%;
  line-height: 50px;
  text-align: center;
  font-size: 20px;
  color: black;
  border-bottom: 1px solid #ddd;
}
.ms-login {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 350px;
  margin: -190px 0 0 -175px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.3);
  overflow: hidden;
}
.ms-content {
  padding: 30px 30px;
}
.login-btn {
  text-align: center;
}
.login-btn button {
  width: 100%;
  height: 36px;
  margin-bottom: 10px;
}
.login-tips {
  font-size: 12px;
  line-height: 30px;
  color: #fff;
}
.login-captcha-img {
  height: 40px;
}
</style>
